/*
 * 楼盘基本信息
 * @author 狮子
 * @time 2018/9/19
 * @since 1.0.0
 * */
// React基础组件
import React from 'react'
// dva 连接组件 - 连接route和model
import { connect } from 'dva'
// 引入antd的组件
import { Form, Modal, Row, Col, Spin, Select, Tabs, Radio } from 'antd'
//导入路由组件，用于跳转等
import { Link, hashHistory } from 'dva/router'
// 导入项目全局配置文件
import config from 'config/config'
// 引入model取值工具方法
import { mapStateToProps } from 'utils/view_utils'
// 当前组件样式
import styles from './forSaleStyle.less'
//引用listPage
import ListPage from 'widget/PageTmpl/ListPage'
import cx from 'classnames'
import FlagBtn from 'widget/FlagBtn/FlagView'
import { download } from "utils/util"

const confirm = Modal.confirm;
const Option = Select.Option;
const FormItem = Form.Item;
const { TabPane } = Tabs;
const RadioGroup = Radio.Group;
const { zysqAppKey,zysqAppsecret} = config
/**
 * description 路由视图及事件处理
 * dispatch 分发到models中的effects对应事件名
 * model 用于获取models中state定义的数据
 * form 表单对象
 */
const RouteView = function ({ dispatch, model, form }) {
  // 表单的子函数
  const { resetFields, getFieldDecorator, validateFields, setFieldsValue } = form
  // 取出model对象，命名空间
  const { modelObj, namespace } = model

  const { houseSale, biz, shareModal, currentImg, currentItem, loading, productId, qrcodeCount, channelType,zysqList, codeId, channelId, showAdv,zysqUrl} = modelObj
  function detailSkip(type, saleId) {
    hashHistory.push({
      pathname: '/home/buildingAdmin/forSaleEdit',
      query: { actionType: type, saleId }
    });

  }
  function detailRecommend(type, productId){
      let endTime = new Date()
      endTime.setFullYear(endTime.getFullYear() + 1)
      let quer =  {
          resourceId: productId,
          validityEndTime: endTime,
          validityStartTime: new Date(),
          productTag: type
      }
      dispatch({
        type: `${namespace}/create`,
        payload: { quer }
      })
  }

  function showDeleteConfirm(id) {
    confirm({
      title: '您确定删除吗?',
      content: '删除后不可恢复',
      okText: '确定',
      okType: 'danger',
      cancelText: '取消',
      onOk() {
        console.log('OK');
        console.log(`${namespace}`)
        dispatch({
          type: `${namespace}/deleteCommunity`,
          payload: { id }
        });
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  }
  function share(item) {
    updateModal(true)
    // dispatch({
    //   type: `${namespace}/qrcodeType`,
    //   payload: {
    //     // channelType: e
    //   }
    // })
    // dispatch({
    //   type:`${namespace}/shareImg`,
    //   payload:{productId:item.productId}
    // })
    dispatch({
      type: `${namespace}/updateStore`,
      payload: { currentItem: item, qrcodeCount: '', channelId: '', currentImg: '' }
    })
  }
  function getDirection(item){
    if (item == '0'){
      return '东'
    }else if(item == '1'){
      return '南'
    }else if(item == '2'){
      return '西'
    }else if(item == '3'){
      return '北'
    }else{
      return ''
    }
  }
  function getDecoration(item){
    if (item == '0'){
      return '毛坯'
    }else if(item == '1'){
      return '简装'
    }else if(item == '2'){
      return '精装'
    }else{
      return ''
    }
  }
  function getElevator(item){
    if (item == '0'){
      return '无'
    }else if(item == '1'){
      return '有'
    }else{
      return ''
    }
  }
  function getPropertyType(item){
    if (item == '0'){
      return '普通住宅'
    }else if(item == '1'){
      return '公寓'
    }else if(item == '2'){
      return '别墅'
    }else if(item == '3'){
      return '平房'
    }else if(item == '4'){
      return '商住楼'
    }else if(item == '5'){
      return '其他'
    }else{
      return ''
    }
  }
  function getAudit(item){
    if(!item){
      return '未审核'
    }else if(item == '1'){
      return '通过'
    }else if(item == '2'){
      return '拒绝'
    }else{
      return ''
    }
  }
  function updateModal(type) {
    dispatch({
      type: `${namespace}/updateStore`,
      payload: { shareModal: type }
    })
  }
  let option = [
    { value: null, label: '全部' },
    { value: '0', label: '未上架' },
    { value: '1', label: '已上架' },
    { value: '2', label: '已下架' },
  ]
  // 分页表格属性配置
  let pageProps = {
    // ---------- 界面部分 ----------
    ui: {
      // 页面接口地址
      api_url: "admin/sale/list",
      // 接口方式
      method: "POST",
      headers: {
        "Content-type": "application/json"
      },
      app: "",
      // 接口参数
      params: "",
      // 模拟数据 - 用于开发需要，若填充了上面的api_url之后，请将此项设置为null
      // "mockData": mockData,
      mockData: null,
      // 查询栏
      search_bar: {
        fields: [
          {
            en_name: 'name',
            zh_name: '小区名称',
            elem_type: 'Input',
            elem_valid_type: 'string',
          },
        ],
        searchHandler: (e) => { // 自定义搜索按钮回调函数，点击搜索时触发
          console.log('search click', e)
        },
        resetHandler: () => { // 自定义重置按钮回调函数，点击重置时触发
          console.log('reset click')
        },
        searchCallback: params => { // 自定义搜索完成后的后调函数, 搜索完成后触发, 并将本次搜索的参数传入
          console.log('search finish', params)
        },
        pasteTargetList: [  // 列表组件中将输入框的en_name作为默认id(也可以通过id另外设置)
          'carName',  // 将需要粘贴事件拦截的输入框id以数组的形式传入, 该参数对应PasteFromClipboard组件的targetList参数
        ]
      },
      // 数据表格
      "table":
      {
        status_params: "status=0",
        status_text: "全部",
        // 表头字段列表
        scroll: { x: 1700 },
        fields: [
          // {
          //   en_name: "key",
          //   zh_name: "序号",
          //   width: "60",
          //   render: (a, item, index, d, e, f) => {
          //     return (
          //       <span>{index + 1}</span>
          //     )
          //   },
          // },

          {
            en_name: "id",
            zh_name: "序号",
            width: 90,
          },
          {
            en_name: "name",
            zh_name: "小区名称",
            width: 180,
          },
          {
            en_name: "address",
            zh_name: "小区地址",
            width: 150
          },
          {
            en_name: "houseType",
            zh_name: "户型",
            width: 150
          },
          {
            en_name: "area",
            zh_name: "建筑面积(m²)",
            width: 130,
          },
          {
            en_name: "floor",
            zh_name: "楼层",
            width: 120,
          },
          {
            en_name: "direction",
            zh_name: "朝向",
            width: 110,
            render: (item) => {
              return (
                <span>{ getDirection(item)}</span>
              )
            },
          },
          {
            en_name: "decoration",
            zh_name: "装修情况",
            width: 110,
            render: (item) => {
              return (
                <span>{ getDecoration(item)}</span>
              )
            },
          },
          {
            en_name: "elevator",
            zh_name: "电梯",
            width: 110,
            render: (item) => {
              return (
                <span>{ getElevator(item)}</span>
              )
            },
          },
          {
            en_name: "propertyType",
            zh_name: "房屋类型",
            width: 110,
            render: (item) => {
              return (
                <span>{ getPropertyType(item)}</span>
              )
            },
          },
          {
            en_name: "price",
            zh_name: "期望售价(万元)",
          },
          {
            en_name: "contact",
            zh_name: "联系人",
            width: 110,
          },
          {
            en_name: "mobile",
            zh_name: "联系方式",
            width: 110,
          },
          {
            en_name: "createTime",
            zh_name: "发布时间",
            width: 170
          },
          {
            en_name: "audit",
            zh_name: "审核状态",
            render: (item) => {
              return (
                <span>{ getAudit(item)}</span>
              )
            },
            width: 170
          }
        ],
        // 表格操作
        actions: [
        {
          func_name: 'onToggleStatus',
          render: (item) => {
            return <FlagBtn node={<a onClick={() => detailSkip('edit', item.id)}>查看</a>} btnId={'10103'}></FlagBtn>
          }
        },
        {
          func_name: 'onToggleStatus',
          render: (item) => {
            return <FlagBtn node={<a onClick={() => showDeleteConfirm(item.id)}>审核</a>} btnId={'10103'}></FlagBtn>
          }
        },
        ],
        action_props: {
          fixed: "right",
          width: 200
        }
      },
      action_bar: []
    },
  }
  if (!!modelObj.biz) {
    pageProps.biz = modelObj.biz
    pageProps.biz.syncBackCbf = (biz) => {
      //console.log(biz)
      dispatch({
        type: `${namespace}/updateStore`,
        payload: { biz }
      })
    }
  }
  return (
    <div>
      <Modal
        // title={`楼盘名称：${currentItem.name}-专属二维码`}
        visible={shareModal}
        onOk={() => updateModal(false)}
        onCancel={() => updateModal(false)}
        footer={null}
        destroyOnClose={true}
      >
        <Tabs defaultActiveKey="1" animated={false} onChange={()=>{
          form.resetFields();
          dispatch({
            type: `${namespace}/updateStore`,
            payload: { currentImg: '',channelId:'',showAdv:null }
          })
          // console.log(showAdv)
        }}>
          <TabPane tab="美的置业云二维码" key="1">
            <Row>
              <Col span={8}><span className={styles.need}>二维码下载类别：</span></Col>
              <Col span={12}>
                <Select value={channelId} onChange={(e) => {
                  dispatch({
                    type: `${namespace}/qrcodeCreate`,
                    payload: {
                      channelType: e
                    }
                  })
                  dispatch({
                    type: `${namespace}/updateStore`,
                    payload: { channelId: e }
                  })
                }}>
                  {channelType.map((item) => {
                    return <Option key={item.id} value={item.id}>{item.name}</Option>
                  })}
                </Select>
              </Col>
            </Row>
            <div>说明：</div>
            <div>1、除美的置业云首页外，其他默认跳转到楼盘主页。</div>
            <div>2、以往建立的二维码可查看<a href="javascript:void(0)" onClick={() => {
              hashHistory.push({
                pathname: '/home/codeChannelAdmin/codeChannelList',
                query: {}
              });
            }}>二维码渠道列表</a></div>
            <div>3、其他传播渠道请<a href='javaScript:void(0);' onClick={() => {
              hashHistory.push({
                pathname: '/home/codeChannelAdmin/codeChannelEdit',
                query: {}
              });
            }}>新建传播渠道</a></div>
            <Row>
              <Col style={{ marginTop: 20, textAlign: 'center' }}>
                <Spin spinning={loading} delay={500}></Spin>
              </Col>
              {!loading ? <Col style={{ marginTop: 20, textAlign: 'center' }}>
                <img src={currentImg} alt="" width={"200px"} style={{}} />
                <div style={{ textAlign: "center", marginTop: 10 }}>
                  {currentImg != '' ?
                    <a onClick={() => {
                      // download(currentImg)
                      // if(download(currentImg)){
                      //   dispatch({
                      //     type:`${namespace}/count`,
                      //     payload:{}
                      //   })
                      //   dispatch({
                      //     type:`${namespace}/shareImg`,
                      //     payload:{productId}
                      //   })
                      // }
                      dispatch({
                        type: `${namespace}/count`,
                        payload: {}
                      })
                    }}>下载二维码({qrcodeCount}次)</a> : null
                  }

                </div>

              </Col> : null}
            </Row>
          </TabPane>
          {/* <TabPane tab="置业神器二维码" key="2">
                <Row>
                  <Col span={8}><span className={styles.need}>二维码下载类别：</span></Col>
                  <Col span={12}>
                    <Select value={channelId} onChange={(e) => {
                      dispatch({
                        type: `${namespace}/qrcodeCreate`,
                        payload: {
                          channelType: e,
                          zysqAppKey,
                          zysqAppsecret,
                          zysqUrl
                        }
                      })
                      dispatch({
                        type: `${namespace}/updateStore`,
                        payload: { channelId: e }
                      })
                    }}>
                      {zysqList.map((item) => {
                        return <Option key={item.id} value={item.id}>{item.name}</Option>
                      })}
                    </Select>
                  </Col>
                </Row>
                <div>说明：</div>
                <div>1、除置业神器首页外，其他默认跳转到楼盘主页。</div>
                <div>2、以往建立的二维码可查看<a href="javascript:void(0)" onClick={() => {
                  hashHistory.push({
                    pathname: '/home/codeChannelAdmin/codeChannelList',
                    query: {}
                  });
                }}>二维码渠道列表</a></div>
                <div>3、其他传播渠道请<a href='javaScript:void(0);' onClick={() => {
                  hashHistory.push({
                    pathname: '/home/codeChannelAdmin/codeChannelEdit',
                    query: {}
                  });
                }}>新建传播渠道</a></div>
             

            <Row>
              <Col style={{ marginTop: 20, textAlign: 'center' }}>
                <Spin spinning={loading} delay={500}></Spin>
              </Col>
              {!loading ? <Col style={{ marginTop: 20, textAlign: 'center' }}>
                <img src={currentImg} alt="" width={"200px"} style={{}} />
                <div style={{ textAlign: "center", marginTop: 10 }}>
                  {currentImg != '' ?
                    <a onClick={() => {
                      // download(currentImg)
                      // if(download(currentImg)){
                      //   dispatch({
                      //     type:`${namespace}/count`,
                      //     payload:{}
                      //   })
                      //   dispatch({
                      //     type:`${namespace}/shareImg`,
                      //     payload:{productId}
                      //   })
                      // }
                      dispatch({
                        type: `${namespace}/count`,
                        payload: {}
                      })
                    }}>下载二维码({qrcodeCount}次)</a> : null
                  }

                </div>

              </Col> : null}
            </Row>
          </TabPane> */}
        </Tabs>
      </Modal>
      <div className={cx('pageLayout')}>
        <ListPage pageProps={pageProps} />
      </div>
    </div>

  )
}

// 连接视图(view)和模型(model)
export default connect(mapStateToProps)(Form.create()(RouteView))
